import AbstractPlugin from './abstract-plugin'
import {CN,EN,Web} from '../config'
import Evt from '../event'
const cssText = `
.#{icn.panel}{
    position: absolute;
    min-width: 200px;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
    box-shadow: 0 0 10px 2px #999;
    font-size: 14px;
    display: block;
    border: none;
    padding: 15px;
}
.#{icn.panel} header{
	text-align:center;
	font-size: 16px;
	color: #{icn.black};
}
.#{icn.panel} > div{
	display:flex;
	justify-content: space-evenly;
    margin-top: 20px;
}
`
export default class Confirm extends AbstractPlugin{
	constructor(...a){
		super(...a)
		this.createClassName({
			panel:"dialog"
		})

		this.__init({
			cssText,
			layer:true,
			layerClass:CN.tlayer,
			panelTag:"dialog"
		})
		this.render()
		this.innerEvt = new Evt()
		this.bind()
	}
	bind(){
		this.on("onLayerClick",()=>{
			this.innerEvt.emit("fail")
		})
	}
	render(){
		this.panel.innerHTML=`
			<header>确认操作</header>
			<div>
				<button data-action="fail" class="${CN.actionBtn} ${CN.defaultBtn}">取消</button>
				<button data-action="done" class="${CN.actionBtn} ${CN.themeBtn}">确认</button>
			</div>	
		`
	}
	onFocusIn(data){
		this.panel.firstElementChild.innerHTML = data.text;
		return this
	}
	onClick(e){
		let t = e.target
		let action = t.dataset.action
		this.innerEvt.emit(action)
		this.focusOut()
	}
	anyway(fn){
		this.innerEvt.once("anyway",fn)
		return this
	}
	done(fn){
		this.innerEvt.once("done",fn)
		return this
	}
	fail(fn){
		this.innerEvt.once("fail",fn)
		return this	
	}
}